<div class="layui-fluid" lay-title="菜单管理">
  <div class="layui-row layui-col-space15">
    <div class="layui-fluid">
      <div class="layui-row layui-col-space10">
        <!-- 列1 菜单结构 -->
        <div class="layui-col-md2">
          <div class="layui-card">
            <div class="layui-card-header">
              <i class="layui-icon layui-icon-layout-fill"></i>&nbsp;菜单结构
            </div>
            <div class="layui-card-body">
              <div id="menu_tree"></div>
            </div>
          </div>
        </div>
        <!-- 列2 编辑数据 -->
        <div class="layui-col-md3">
          <div class="layui-card">
            <div class="layui-card-header">
              <i class="layui-icon layui-icon-layout-fill"></i>&nbsp;编辑数据
            </div>
            <div class="layui-card-body">
              <div
                style="padding: 10px; margin-bottom:10px; border-bottom:RGB(241,241,241) 1px solid;"
              >
                <div class="layui-btn-group">
                  <button
                    id="query_icon_button"
                    type="button"
                    class="layui-btn layui-btn-primary layui-btn-sm"
                  >
                    <i class="layui-icon">&#xe83a;</i>查询图标ID
                  </button>
                  <button
                    id="query_perm_button"
                    type="button"
                    class="layui-btn layui-btn-primary layui-btn-sm"
                  >
                    <i class="layui-icon">&#xe84c;</i>查询权限ID
                  </button>
                </div>
              </div>
              <div id="item_info_edit_pannel">
                <form class="layui-form" lay-filter="edit_menu_form">
                  <!-- 菜单ID -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">菜单ID</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="id"
                        placeholder="菜单ID"
                        autocomplete="off"
                        class="layui-input"
                        lay-verify="required"
                      />
                    </div>
                  </div>

                  <!-- 菜单标题 -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="title"
                        placeholder="菜单标题"
                        autocomplete="off"
                        class="layui-input"
                        lay-verify="required"
                      />
                    </div>
                  </div>

                  <!-- URL -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">URL</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="url"
                        placeholder="URL"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>

                  <!-- 图标 -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                      <input
                        style="display: inline-block;"
                        type="text"
                        name="icon"
                        placeholder="图标名称"
                        autocomplete="off"
                        class="layui-input"
                        lay-verify="required"
                      />
                    </div>
                  </div>

                  <!-- 顺序 -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">顺序</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="sort"
                        placeholder="顺序"
                        autocomplete="off"
                        class="layui-input"
                        lay-verify="required"
                      />
                    </div>
                  </div>

                  <!-- 父级ID -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">父菜单ID</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="parentMid"
                        placeholder="顶级菜单填0"
                        autocomplete="off"
                        class="layui-input"
                        lay-verify="required"
                      />
                    </div>
                  </div>

                  <!-- 权限ID -->
                  <div class="layui-form-item">
                    <label class="layui-form-label">权限ID</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="permId"
                        placeholder="所需权限ID"
                        autocomplete="off"
                        class="layui-input"
                        lay-verify="required"
                      />
                    </div>
                  </div>

                  <!-- 按钮 -->
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button
                        id="edit_menu_submit_button"
                        class="layui-btn"
                        lay-submit
                      >
                        新增
                      </button>
                      <button
                        id="edit_menu_reset_button"
                        type="reset"
                        class="layui-btn layui-btn-primary"
                      >
                        重置
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- 列3 菜单数据 -->
        <div class="layui-col-md7">
          <div class="layui-card">
            <div class="layui-card-header">
              <i class="layui-icon layui-icon-layout-fill"></i>&nbsp;菜单数据
            </div>
            <div class="layui-card-body">
              <table
                id="menu_manage_list"
                lay-filter="menu_manage_list"
              ></table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    layui.use(["admin", "table", "tree", "form"], function(
      admin,
      table,
      tree,
      form
    ) {
      var $ = layui.$;
      var table = layui.table;
      var tree = layui.tree;
      var form = layui.form;
      var updateFlag = false;

      form.render();

      //获取菜单数据
      admin.get({
        api: "getFullUserMenu",
        success: function(res) {
          renderMenuTree("#menu_tree", res.data);
        }
      });

      // 查询图标操作
      $("#query_icon_button").on("click", function() {
        alert("请在转到的页面中赋值图标代码后返回填入");
        window.location.href = "#/icon/index";
      });

      // 查询权限ID操作
      $("#query_perm_button").on("click", function() {
        layer.alert("查询权限ID操作：建设中");
      });

      // 重置按钮
      $("#edit_menu_reset_button").on("click", function() {
        updateFlag = false;
        $("#edit_menu_submit_button").text("新增");
      });
      form.on("submit(edit_menu_form)", function(data) {
        var uploadDate = form.val("edit_menu_form");
        if (updateFlag) {
          console.log("更新菜单项：", uploadDate);
          admin.put({
            api: "getMenu",
            data: uploadDate,
            success: function(res) {
              layer.alert(
                "更新菜单：" +
                  uploadDate.title +
                  " 成功！<br/>请手动刷新页面后查看"
              );
            }
          });
        } else {
          console.log("新增菜单项：", uploadDate);
          admin.post({
            api: "getMenu",
            data: uploadDate,
            success: function(res) {
              layer.alert(
                "新增菜单：" +
                  uploadDate.title +
                  " 成功！<br/>请手动刷新页面后查看"
              );
            }
          });
        }
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });

      var renderMenuTree = function(elem, menuData) {
        return tree.render({
          elem: elem,
          data: menuData,
          onlyIconControl: true,
          edit: ["del"],
          operate: function(obj) {
            // 删除操作
            console.log("删除节点：", obj.data);
            admin.delete({
              api: "getMenu",
              data: {
                mId: obj.data.id
              },
              success: function(res) {
                layer.alert("删除成功！");
              }
            });
          },
          click: function(obj) {
            $("#edit_menu_submit_button").text("更新");
            updateFlag = true;
            form.val("edit_menu_form", obj.data);
          }
        });
      };

      // 渲染表格实例
      var tableIns = table.render({
        elem: "#menu_manage_list",
        page: false,
        limit: 100,
        url: "ucenter/menu/list", //数据接口
        cols: [
          [
            {
              title: "ID",
              field: "mid",
              width: 60,
              align: "center"
            },
            {
              title: "标题",
              field: "title",
              width: 180,
              align: "center"
            },
            {
              title: "URL",
              field: "url",
              minWidth: 200,
              align: "left"
            },
            {
              title: "图标",
              field: "icon",
              minWidth: 200,
              align: "left",
              templet: function(d) {
                return (
                  '<i class="layui-icon ' + d.icon + '">  ' + d.icon + "</i>"
                );
              }
            },
            {
              title: "顺序",
              field: "sort",
              width: 70,
              align: "center"
            },
            {
              field: "parentMid",
              title: "父菜单ID",
              width: 90,
              align: "center"
            },
            {
              field: "permId",
              title: "菜单权限ID",
              width: 90,
              align: "center"
            }
          ]
        ]
      });
    });
  </script>
</div>
